<template>
  <view class="content">
    <view class="uni-list">
      <view 
        class="uni-list-cell" 
        hover-class="uni-list-cell-hover" 
        v-for="(item, index) in news" 
        :key="index" 
        @click="openInfo(item.post_id)"
      >
        <view class="uni-media-list">
          <image class="uni-media-list-logo" :src="item.author_avatar"></image>
          <view class="uni-media-list-body">
            <view class="uni-media-list-text-top">{{item.title}}</view>
            <view class="uni-media-list-text-bottom uni-ellipsis">{{item.created_at}}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	 export default {
	    data(){
	      return{
	        news: []
	      }
	    },
	    onLoad: function(){
	      uni.showLoading({
	        title: '加载中...'
	      })
	      uni.request({
	        url: 'http://unidemo.dcloud.net.cn/api/news',
	        method: 'GET',
	        data: {},
	        success: res => {
	          this.news = res.data;  // 修复了这里的语法错误
	          uni.hideLoading();
	        },
	        fail: () => {},
	        complete: () => {}
	      })
	    },
	    methods: {
	      openInfo(newsid) {  // 简化了参数传递方式
	        console.log(newsid);
	        uni.navigateTo({  // 修正了API名称
	          url: "../detail/detail?newsid=" + newsid
	        })
	      }
	    }
	  }
</script>

<style>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  } 
  .uni-media-list-body {
    height: auto;
  }
  .uni-media-list-text-top {
    line-height: 1.6em;
  }
  .uni-list-cell {
    padding: 20rpx;
    border-bottom: 1rpx solid #eee;
  }
  .uni-media-list {
    display: flex;
    align-items: center;
  }
  .uni-media-list-logo {
    width: 80rpx;
    height: 80rpx;
    margin-right: 20rpx;
    border-radius: 50%;
  }
  .uni-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>

